<template>
  <a-card :bordered="false">


    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-form-item>
          <span  class="table-page-search-submitButtons">
             <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
             <a-button  @click="loadData" type="primary" icon="redo">刷新</a-button>
           </span>
        </a-form-item>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        bordered
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <!-- 字符串超长截取省略号显示-->
        <span slot="ellipsis" slot-scope="text">
          <ak-ellipsis :value="text" :length="25" />
        </span>


        <span slot="action" slot-scope="text, record">
          <a @click="resumeJob(record)" v-if="record.status=='PAUSED'">启动</a>
          <a @click="pauseJob(record)" v-if="record.status=='NORMAL'">中断</a>

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item><a @click="handleEdit(record)">编辑</a></a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
               <a-menu-item><a @click="executeImmediately(record)">立即执行</a></a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <quartzJob-modal ref="modalForm" @ok="modalFormOk"></quartzJob-modal>
  </a-card>
</template>

<script>
  import QuartzJobModal from './modules/QuartzJobModal'
  import { getAction } from '../../api/manage'
  import AkfhListMixin from '../../mixin/AkfhListMixin';
  import AkEllipsis from '../../components/akfh/AkEllipsis'
  import {sysQuartzJobUrl} from '../../api/url';
  import AFormItem from 'ant-design-vue/es/form/FormItem'

  export default {
    name: "QuartzJobList",
    mixins:[AkfhListMixin],
    components: {
      AFormItem,
      QuartzJobModal,
      AkEllipsis
    },
    data () {
      return {
        description: '定时任务在线管理',
        // 查询条件
        queryParam: {},
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '任务类名',
            align: "center",
            dataIndex: 'jobClassName',
            scopedSlots: {customRender: 'ellipsis'},
          },
          {
            title: 'cron表达式',
            align: "center",
            dataIndex: 'cronExpression'
          },
          {
            title: '参数',
            align: "center",
            dataIndex: 'parameter',
            scopedSlots: {customRender: 'ellipsis'},
          },
          {
            title: '描述',
            align: "center",
            dataIndex: 'description',
            scopedSlots: {customRender: 'ellipsis'},
          },
          {
            title: '过期策略',
            align: "center",
            dataIndex: 'misfireInstructionAction_dictText',
            scopedSlots: {customRender: 'ellipsis'},
          },
          {
            title: '开始时间',
            align: "center",
            dataIndex: 'startTime',
            scopedSlots: {customRender: 'ellipsis'},
          },
          {
            title: '结束时间',
            align: "center",
            dataIndex: 'endTime',
            scopedSlots: {customRender: 'ellipsis'},
          },
          {
            title: '下次执行时间',
            align: "center",
            dataIndex: 'nextFireTime',
            scopedSlots: {customRender: 'ellipsis'},
          },
          {
            title: '最后执行时间',
            align: "center",
            dataIndex: 'finalFireTime',
            scopedSlots: {customRender: 'ellipsis'},
          },
          {
            title: '状态',
            align: "center",
            dataIndex: 'status_dictText',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            width: 180,
            scopedSlots: {customRender: 'action'},
          }
        ],
        url: sysQuartzJobUrl
      }
    },

    methods: {
      loadData() {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        this.loading = true;
        getAction(this.url.list).then((res) => {
          if (res.success) {
            this.dataSource = res.result;
          }
          this.loading = false;
        })
      },
      pauseJob: function(record){
        var that = this;
        //暂停定时任务
        this.$confirm({
          title:"确认暂停",
          content:"是否暂停选中任务?",
          onOk: function(){
            getAction(that.url.pause,{id:record.id}).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.loadData();
                that.onClearSelected();
              }
            });
          }
        });

      },
      resumeJob: function(record){
        var that = this;
        //恢复定时任务
        this.$confirm({
          title:"确认启动",
          content:"是否启动选中任务?",
          onOk: function(){
            getAction(that.url.resume,{id:record.id}).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.loadData();
                that.onClearSelected();
              }
            });
          }
        });
      },
      executeImmediately(record) {
        let that = this;
        //立即执行定时任务
        this.$confirm({
          title: "确认提示",
          content: "是否立即执行任务?",
          onOk: function () {
            getAction(that.url.execute, {id: record.id}).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.loadData();
                that.onClearSelected();
              }
            });
          }
        });
      }
    }
  }
</script>
<style scoped>
  @import "../../assets/less/common.less";
</style>